<template>
  <div>
    <div style="width: 650px">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="大标题" prop="bigtitle">
          <el-input v-model="form.bigtitle"></el-input>
        </el-form-item>

        <el-form-item label="小标题" prop="smtitle">
          <el-input v-model="form.smtitle"></el-input>
        </el-form-item>
        <el-form-item label="专题背景图片" prop="vsimg">
          <el-upload
            class="avatar-uploader"
            name="sbb"
            :action="`${UPLOADURL}/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.vsimg" :src="form.vsimg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="专题具体文案" prop="t_info">
          <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 200px; overflow-y: hidden"
              v-model="form.t_info"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">立即新增</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import httpApi from "@/http";

export default {
  components: { Editor, Toolbar },

  data() {
    return {
      editor: null,
      html: "<p>hello</p>",
      toolbarConfig: {
        toolbarKeys: ["bold", "underline", "italic", "color"],
      },
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      form: {
        bigtitle: "",
        smtitle: "",
        vsimg: "",
        t_info: "",
      },
      rules:{
        bigtitle:[
        { required: true, message: "必填", trigger: "blur" }
        ],
        smtitle:[
        { required: true, message: "必填", trigger: "blur" }
        ],
        vsimg:[
        { required: true, message: "必选", trigger: "blur" }
        ],
        t_info:[
        { required: true, message: "必填", trigger: "blur" }
        ]
      }
    };
  },
  watch: {
    "form.t_info"(newVal) {
      const videoIntro = newVal.replace(/^<p>(.*?)<\/p>$/, "$1");
      this.form.t_info = videoIntro;
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错

      // setTimeout(() => {
      //   const toolbar = DomEditor.getToolbar(editor);
      //   const curToolbarConfig = toolbar.getConfig();
      //   console.log("---------------------------");
      //   console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组
      // }, 1000);
    },

    /** 提交新增专题的表单 */
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          // this.form.t_info = this.form.t_info.split('>')
          // 提交表单
          httpApi.subjectApi.add(this.form).then((res) => {
            console.log("新增专题：", res);
            if (res.data.code == 200) {
              // 新增成功
              this.$message({ type: "success", message: "成功" });
              this.$router.push("/home/subject-list");
            } else {
              this.$message({ type: "error", message: "系统异常" });
            }
          });
        }
      });
    },

    /**上传成功后执行 */
    handleAvatarSuccess(res, file) {
      console.log(res);
      // 将上传成功的图片访问路径赋值传给form对象的属性
      this.form.vsimg = res.pic;
    },

    /**图片上传之前执行 */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  height: 178px;
  display: block;
}
</style>
